<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>

<!--查询框-->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">文章名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="content" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="created" placeholder="" class="layui-input" id="search_time">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">身份</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="article-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>


<body>

<table id="demo" lay-filter="test"></table>

<script src="../static/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="modify">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    //加载模块
    layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件


        var form = layui.form;
        var layer = layui.layer //弹层
            ,$ = layui.jquery
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate //日期
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,dropdown = layui.dropdown //下拉菜单
        // layui.use('table', function(){
        //         var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'getlist' //数据接口
            ,page: true //开启分页
            ,limit:2
            ,limits:[2,4,6,8,10]
            ,totalRow: true //开启合计行
            ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cols: [

                [ //表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

                    ,{field: 'created', title: '时间',sort: true,
                    templet: "<div>{{layui.util.toDateString(d.created, 'yyyy-MM-dd')}}</div>"}
                    ,{field: 'content', title: '内容',sort: true}
                    ,{field: 'author', title: '用户名',sort: true}
                    ,{field: 'ip', title: 'ip',sort: true}
                    // ,{field: 'status', title: '爱好',sort: true}
                    ,{fixed: 'right', width: 150, align:'center', width: 300,toolbar: '#barDemo'}
                ]
            ]
        });

        laydate.render({
            elem:'#insert_created'
        })

        laydate.render({
            elem:'#update_created'
        })

        //执行一个laydate实例
        laydate.render({
            elem: '#search_time' //指定元素
        });




        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据

            switch(obj.event){
                case 'add':
                        layer.open({
                            type: 1,
                            title: '文章添加',
                            area: ['500px', '500px'],
                            anim: 5,
                            resize: false,
                            content: $("#insertDemo")
                        });
                        var created = layui.util.toDateString(data.created, 'yyyy-MM-dd');
                        $("#insert_created").val(created);
                        break;


                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        var arr = new Array();
                        for (var i = 0; i <checkStatus.data.length ; i++) {
                            arr.push(checkStatus.data[i].id);
                        }
                        $.post('tanchuid/'+ arr, function(d) {
                            layer.open({
                                type: 1,
                                title: '文章头部更新',
                                area: ['500px', '500px'],
                                anim: 5,
                                resize: false,
                                content: $('#updatedemo')
                            });
                            $("#update_ip").val(d.data.ip)
                            $("#update_content").val(d.data.content)
                            $("#update_id").val(d.data.id)
                            var created = layui.util.toDateString(d.data.created, 'yyyy-MM-dd');
                            $("#update_created").val(created)
                            $("#update_status").val(d.data.status)
                            $('#update_sex').val(d.data.sex)
                        });
                        form.render();
                    }
                    break;


                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        var arr = new Array();
                        for (var i = 0; i <checkStatus.data.length ; i++) {
                            arr.push(checkStatus.data[i].id);
                        }
                        $.ajax({
                            url:'/Bydelete'
                            ,data:{"ids":arr}
                            ,traditional:true  //如果向后台传输数组或者list的对象的时候要深度序列化
                            ,success:function (z) {
                                if (z.data>0){
                                    table.reload('demo')
                                }
                            }

                        })
                    }
                    break;
            };
        });
        //监听行事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            var form = layui.form;


            if(layEvent === 'detail'){
                //layer.msg(data.id);
                // layer.open({
                //     type: 1,
                //     content: data.content //这里content是一个普通的String
                // });


                $.post('/tanchuid/'+data.id,{}, function(str){
                    layer.open({
                        type: 1,
                        title: '文章详情',
                        area: ['500px', '300px'],
                        anim: 5,
                        resize:false,
                        // offset:'t',
                        //content: "内容:"+str.data.content //注意，如果str是object，那么需要字符拼接。
                        content: $('#detailDemo')
                    });

                    $("#ip").text(str.data.ip)
                    $("#content").text(str.data.content)
                    $("#id").text(str.data.id)
                    var created2 = layui.util.toDateString(str.data.created, 'yyyy-MM-dd');
                    $("#created").text(created2)
                    $("#status").text(str.data.status)
                    form.render();

                });


            }
            if(layEvent === 'modify'){

                laydate.render({
                    elem: '#created_modify' //指定元素
                });

                var form = layui.form;

                $.post('/tanchuid/'+data.id,{}, function(d){
                    layer.open({
                        type: 1,
                        title: '文章修改',
                        area: ['500px', '500px'],
                        anim: 5,
                        resize:false,
                        // offset:'t',
                        //content: "内容:"+str.data.content //注意，如果str是object，那么需要字符拼接。
                        content: $('#modifyDemo')
                    });

                    $("#ip_modify").val(d.data.ip)
                    $("#content_modify").val(d.data.content)
                    $("#id_modify").val(d.data.id)
                    var created = layui.util.toDateString(d.data.created, 'yyyy-MM-dd');
                    $("#created_modify").val(created)
                    $("#status_modify").val(d.data.status)
                    $("[value="+d.data.sex+"]").prop("checked",true);
                    $('input[name=checkboxx]').prop("checked",false);
                    if (d.data.checkboxx!=null){
                        var duoxuan=new Array();
                        duoxuan = d.data.checkboxx.split(",")
                        for (var i = 0; i <duoxuan.length ; i++) {
                            console.log(duoxuan[i])
                            $('input[name=checkboxx][value=' + duoxuan[i] +']').prop('checked',true);
                        }
                    $("#checkboxx_modify").val(d.data.checkboxx);
                    }
                    form.render('checkbox');
                    form.render();
                    $("#close_modify").val(d.data.close);
                })
            }
            if(layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $ = layui.jquery
                    $.ajax({
                        url: "/delete",
                        data: {"id": data.id},
                        datatype: "json",
                        type: "GET",
                    })
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
            // } else if(menudata.id === 'edit'){
            //     layer.msg('编辑操作，当前行 ID:'+ data.id);
            // }
            // if (layEvent === 'formupdate'){
            //
            // }

        });
    });



</script>


<!--头工具栏-->
<div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        </div>
    </script>
</div>



<!--//详情-->
<div style="display: none" id="detailDemo">

    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <span class="layui-form-label" id="id" style="width: auto"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论日期</label>
            <span class="layui-form-label" id="created" style="width: auto"></span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <span class="layui-form-label" id="ip" style="width: auto"></span>
        </div>




        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读">
                <input type="checkbox" name="like[daze]" title="发呆">
            </div>
        </div>


        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="content"></textarea>
        </div>
        <div class="layui-form-item">
        </div>
    </form>

    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</div>



<!--修改-->
<div style="display: none" id="modifyDemo">


    <form class="layui-form" action="">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" id="id_modify" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论日期</label>
            <div class="layui-input-block">
                <input type="text" name="created" id="created_modify" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <div class="layui-input-inline">
                <input type="password" name="ip" id="ip_modify" required lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <select name="status" lay-filter="required" id="status_modify">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block" id="sex_modify">
                <input type="radio" id="sex1" name="sex"  value="男" title="男" checked="" >
                <input type="radio" id="sex2" name="sex" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block" id="close_modify">
                <input class="switch" type="checkbox" value="0" lay-skin="switch" lay-filter="mode" lay-text="开|关" name="close">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block" id="checkboxx_modify">
                <input type="checkbox" name="checkboxx" value="1" title="写作" checked="">
                <input type="checkbox" name="checkboxx" value="2" title="阅读">
                <input type="checkbox" name="checkboxx" value="3" title="发呆">
            </div>
        </div>



        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="content_modify"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            $ = layui.jquery
            //监听提交

            var enable;
            form.on('switch(mode)',function(data){
                if(this.checked){
                    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('开启', data.othis)
                }else {
                    layer.msg('开关： 关掉了', {
                        offset: '6px'
                    });
                }
                // enable=(data.value==1)?0:1
                // $('#close_modify').val(enable)
                // console.log(enable)
            })

            form.on('submit(formDemo)', function(data){
                //复选框
                var arr=new Array();
                $("input:checkbox[name='checkboxx']:checked").each(function (i) {
                    arr[i] = $(this).val();
                    data.field.checkboxx = arr.join(",");//将数组合并成字符串
                });
                console.log(data.field.checkboxx);

                //时间string型转换为date型
                var created=data.field.created;
                created = new Date(created);
                data.field.created=created;
                $.ajax({
                    url:"/update",
                    data:data.field,
                    dataType:"json",
                    type:"POST",
                    success:function (d) {
                        document.getElementById("msg").innerText=d.msg

                        window.location.href="/abc"

                    }
                })

            });

        });
    </script>
</div>


<!--更新-->
<div style="display: none" id="updatedemo">

    <form class="layui-form" action="">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" id="update_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论日期</label>
            <div class="layui-input-block">
                <input type="text" name="created" id="update_created" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <div class="layui-input-inline">
                <input type="password" name="ip" id="update_ip" required lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="status" lay-filter="required" id="update_status">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block" id="update_sex">
                <input type="radio" id="sex3" name="sex"  value="男" title="男" checked="" >
                <input type="radio" id="sex4" name="sex" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="update_content"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formupdate">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            $ = layui.jquery
            //监听提交


            form.on('submit(formupdate)', function(data){
                var created=data.field.created;
                created = new Date(created);
                data.field.created=created;
                $.ajax({
                    url:"/update",
                    data:data.field,
                    dataType:"json",
                    type:"POST",
                    success:function (d) {
                        document.getElementById("msg").innerText=d.msg

                        window.location.href="/abc"

                    }
                })

            });

        });
    </script>
</div>

<!--添加-->
<div style="display: none" id="insertDemo">
    <form class="layui-form" action="">
        <div class="layui-form-item" >
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input name="id" id="insert_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论日期</label>
            <div class="layui-input-block">
                <input type="text" name="created" id="insert_created" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址</label>
            <div class="layui-input-inline">
                <input type="password" name="ip" id="insert_ip" required lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="status" lay-filter="required" id="insert_status">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block" id="insert_sex">
                <input type="radio" id="sex5" name="sex"  value="男" title="男" checked="" >
                <input type="radio" id="sex6" name="sex" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="insert_content"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="forminsrt">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            $ = layui.jquery
            //监听提交


            form.on('submit(forminsrt)', function(data){
                var created=data.field.created;
                created = new Date(created);
                data.field.created=created;
                $.ajax({
                    url:"/insert",
                    data:data.field,
                    dataType:"json",
                    type:"POST",
                    success:function (d) {
                        document.getElementById("msg").innerText=d.msg

                        window.location.href="/abc"

                    }
                })

            });

        });
    </script>
</div>
</body>
</html>